<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>附近设备</title>
    <script src="font/iconfont.js"></script>
    <style>
        h2,p,ul,body{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: rgb(242, 242, 242); 
        }
        a{
            text-decoration: none;
        }
        .title{
            list-style: none;
            left: 0;
            top: 0;
            width: 100%;
            
            z-index: 9;
        }
        .title1{
            display: flex;
            position: fixed;
            width: 100%;
            height: 45px;
            margin-top: -50px;
            z-index: 8;
            background-color: #fff;
        }
        .title1 .icon_ti{
            width: 30px;
            height: 30px;
            padding-top: 10px;
            padding-left: 5px;
        }
        .title1 h2{
            font-size: 20px;
            padding-left: 30%;
            padding-top: 10px;
        }
        .title2{
            margin-top: 50px;
        }
        .tab{
            width: 100%;
            margin-top: 10px;           
        }
        .tt{
            width: 100%;
            position: fixed;
            display: flex;
            margin-top: -5px;
            margin-bottom: 20px;
            z-index: 5;
            background-color: #fff;
        }
        .tt>span{
            width: 20%;
            height: 32px;
            line-height: 32px;
            text-align: center;
            font-size: 15px;
        }
        .tt>.cur{
            margin-top: -1px;
            color: rgb(69,67,203);
        }
        .location{
            width: 100%;
            height: 60px;
            position: fixed;
            display: flex;
            margin-top: 10px;
            background-color: rgb(242, 242, 242);
            z-index: 4;
        }
        .icon_local{
            width: 13px;
            height: 13px;
            margin-top: 32px;
            margin-left: 8px;
        }
        .location p{
            font-size: 13px;
            margin-top: 30px;
            margin-left: 5px;
        }
        .location a{
            font-size: 13px;
            margin-top: 30px;
            margin-left: 30px;
            color: rgb(69,67,203);
        }
        .show{
            background-color: rgb(242, 242, 242);
            
        }
        .fujin{
            background-color: rgb(242, 242, 242);
            padding-top: 10px;
            padding-bottom: 10px;          
        }
        .fujin .neighb{          
            font-size: 20px;
            margin-left: 10px;
            margin-top: 80px;
        }
        .jlist{
            background-color: rgb(242, 242, 242);
            height: 2000px;
            list-style: none;
        }
        .jlist .box{
            position: relative;
            width: 88%;
            margin-left: 2%;
            padding: 15px;
            display: flex;
            background-color: #fff;
            margin-bottom: -10px;
            border-radius: 10px;
        }
        .jlist>li{        
            margin-bottom: 20px;
        }
        .jlist a{
            color: #000;
        }
        
        .left h2{
            font-size: 18px;
        }
        .left p{
            width: 240px;
            font-size: 15px;
            margin-top: 10px;
        }
        .now{
            display: flex;
            margin-top: 20px;
        }
        .bluebox{
            width: 26px;
            height: 20px;
            background-color: rgb(75,210,255);
            font-size: 12px;
            padding-top: 2px;
            color: #fff;
            text-align: center;
        }
        .now #now1{
            font-size: 13px;
            color: red;
            margin-left: 6px;
            padding-top: 2px;
        }
        .now #total{
            font-size: 13px;
            padding-top: 2px;
        }
        .far{
            margin-top: 36px;
        }
        .icon{
            position: relative;
            width: 40px;
            height: 40px;
            top: 28px;
            left:10px;
        }
        #huadong{
            width: 30px;
            height: 30px;
            position: fixed;
            top: 500px;
            left: 290px;
            padding: 9px;
            font-size: 14px;
            color: #fff;
            background-color: pink;
            z-index: 4;
            transition: all .6s;
            opacity:0;
            border-radius: 500px;
        }
    </style>
</head>
<body>
    <div class="title">
            <div class="title1">
                <a href="./U1-index.html">
                    <svg class="icon_ti" aria-hidden="true">
                        <use xlink:href="#icon-zuojiantou"></use>
                    </svg>
                </a>
                <h2>附近设备</h2>
            </div>
            <div class="title2">
                <div class="tab">
                    <div class="tt">
                        <span class="cur">洗衣/烘干</span>
                        <span>饮用水</span>
                        <span>淋浴</span>
                        <span>空调</span>
                        <span>吹风</span>
                    </div>
        
                <div class="location">
                    <svg class="icon_local" aria-hidden="true">
                        <use xlink:href="#icon-weizhi"></use>
                    </svg>
                          <p>辽宁省大连市甘井子区大连理工啦啦啦啦...</p>
                          <a href="#">重新定位</a>      
                </div>
                <div class="tc show one">
                    <div class="fujin">
                        <h2 class="neighb">附近的洗衣房</h2>
                    </div>
                   <ul class="jlist"></ul>
                </div>
                <div class="tc"></div>
                <div class="tc"></div>
                <div class="tc"></div>
                <div class="tc"></div>
            </div>
        </div>
    </div>

    <a href="U6.html">
        <div id="huadong">回到顶部</div>
    </a>

    <script>
        //dom代码写 在body的最后，或者onload函数里
        var tab=document.querySelector(".tab");
        var tt=tab.getElementsByClassName("tt")[0];
        var span=tt.querySelectorAll("span");
        var tc=tab.querySelectorAll(".tc");
        console.log(tab,tt,span,tc);
        for(var i=0;i<span.length;i++)
        {
            span[i].index=i;
            span[i].onclick=function(){
                //不能使用i，使用this
                //所以span都去除cur类，所有的tc都隐藏
                for(var j=0;j<span.length;j++){
                    tc[j].style.display="none";/* 所有的tc都隐藏 */
                    span[j].classList.remove("cur");/* 所有span都去除cur类 */
                }
                tc[this.index].style.display="block";
                this.classList.add("cur");
            }
        }
    </script>
    <script>
        var json=[{
            Ctitle:"6舍-A座6层",
            apartment:"大连哈哈大学东区三期学生公寓",
            bluebox:"洗",
            now1:"闲1",
            total:"/共1", 
            far:"0.34km",          
        },
        {
            Ctitle:"6舍-A座3层",
            apartment:"大连哈哈大学东区三期学生公寓",
            bluebox:"洗",
            now1:"闲0",
            total:"/共1", 
            far:"0.37km",          
        },
        {
            Ctitle:"成风",
            apartment:"大连哈哈大学东区三期学生公寓",
            bluebox:"洗",
            now1:"闲0",
            total:"/共1", 
            far:"0.37km",          
        },
        {
            Ctitle:"6舍-A座3层",
            apartment:"大连哈哈大学东区三期学生公寓",
            bluebox:"洗",
            now1:"闲0",
            total:"/共1", 
            far:"0.37km",          
        },
        {
            Ctitle:"6舍-A座3层",
            apartment:"大连哈哈大学东区三期学生公寓",
            bluebox:"洗",
            now1:"闲0",
            total:"/共1", 
            far:"0.37km",          
        },
    {
            Ctitle:"6舍-A座3层",
            apartment:"大连哈哈大学东区三期学生公寓",
            bluebox:"洗",
            now1:"闲0",
            total:"/共1", 
            far:"0.37km",          
        }];

        var jlist=document.querySelector(".jlist");

        json.forEach(function(v,i){
            var nli=document.createElement("li");/* 创建li元素 */
            nli.innerHTML=`     <a href="#">
                                <div class="box">
                                    <div class="left">
                                        <h2>${v.Ctitle}</h2>
                                        <p>${v.apartment}</p>
                                        <div class="now">
                                            <div class="bluebox">${v.bluebox}</div>
                                            <span id="now1">${v.now1}</span>
                                            <span id="total">${v.total}</span>
                                        </div>
                                    </div>
                                    <span class="far">${v.far}</span>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-jiantou"></use>
                                    </svg>                        
                                </div>
                            </a>
                
            `;//es6新的字符串语法，内部可包括引号，包括变量${}
            jlist.appendChild(nli);
        });

        //在jlist的内部的最后增加li
    </script>

<script>
    window.onscroll=function(){
        var st=document.documentElement.scrollTop||document.body.scrollTop;
        console.log(st);
        if(st>400){//可写固定值
            // box.style.display="block";
            huadong.style.opacity=1;
            //复杂的改变使用classList
        }
        else{
            // box.style.display="none";
            huadong.style.opacity=0;
        }
    }
</script>
</body>
</html>